<template>
    <v-container>
<!--        <v-skeleton-loader v-if="show"-->
<!--                ref="skeleton"-->
<!--                :type="stuffing"-->
<!--                class="mx-auto"-->
<!--        ></v-skeleton-loader>-->
        <v-text-field
                label="Search"
                v-model="search"
                clearable
                placeholder="Search One Icon"
                append-outer-icon="mdi-magnify"
                solo
                large
                @click:append-outer="inquire"
                @click:clear="inquire"
        ></v-text-field>
        <v-sheet height="80%" class="full-width">
            <v-row class="mb-6">
                <v-col v-for="(item, index) in icons" :key="index" :lg="1" :md="6" :sm="3">
                    <v-tooltip bottom>
                        <template v-slot:activator="{ on, attrs }">
                            <v-icon large v-bind="attrs" v-on="on" @click="copy($event, item.name)">mdi-{{ item.name }}</v-icon>
                        </template>
                        <span>{{ item.name }}</span>
                    </v-tooltip>
                </v-col>
            </v-row>
        </v-sheet>

        <div class="text-center">
            <v-pagination
                    v-model="page"
                    :length="length"
                    @input="refresh"
            ></v-pagination>
        </div>
    </v-container>
</template>
<script>
    import { setClipboard } from "@/util/clipboard"
    import {GetListIcon} from "@/api/icon";
    export default {
        name: "Icon",
        data() {
            return {
                icons: [],
                search: "",
                page: 1,
                size: 108,
                total: 600,
                // show: true,
                // stuffing: 'list-item-avatar-three-line',
            };
        },
        computed: {
            length() {
                return Math.ceil(this.total / this.size)
            }
        },
        created() {
            this.refresh()
        },
        methods: {
            refresh() {
                // this.show = true
                GetListIcon({page: this.page, size: this.size, search:this.search}).then(res => {
                    this.total = res.body.total
                    this.icons = res.body.list
                    // this.show = false
                })
            },
            inquire() {
                setTimeout(()=>{
                    if(this.search !== "") {
                        this.page = 1
                        this.refresh()
                    }
                }, 1000)
            },
            copy(e, text) {
                setClipboard(e, text).then(value=>{
                    this.$msg.success(value)
                }, reason => {
                    this.$msg.warn(reason)
                })
            },
        },
    };
</script>